<template>
  <el-card>
    <!-- Logo、名称和描述 -->
    <el-row class="flex-center">
        <Logo></Logo>
    </el-row>
    <el-row class="flex-center">
      <h2>登录</h2>
    </el-row>
    <!-- 登录表单 -->
    <el-form ref="loginForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <!-- 邮箱地址输入框 -->
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form-item label="" prop="username" label-width="0">
            <el-input v-model="formData.username" placeholder="邮箱" clearable prefix-icon='el-icon-user'
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 密码输入框 -->
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form-item label="" prop="password" label-width="0">
            <el-input v-model="formData.password" placeholder="密码" clearable prefix-icon='el-icon-lock'
                      show-password :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 验证码输入框 -->
      <el-row>
        <el-col :span="11" :offset="2">
          <el-form-item label="" prop="inputCode" label-width="0">
            <el-input v-model="formData.inputCode" placeholder="验证码" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 验证码画布 -->
        <el-col :span="8">
          <div class="login-code" @click="refreshCode()" v-loading="loading">
            <Sidentify :identifyCode="identify.identifyCode"></Sidentify>
          </div>
        </el-col>
      </el-row>
      <!-- 登录按钮 -->
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form-item size="large" label="" label-width="0">
            <el-button type="primary" @click="handleLogin" :style="{width: '100%'}">登录</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 登录帮助 -->
      <el-row>
        <el-col class="logo">
          <el-link type="primary" @click="toRegister">{{ domText.register }}</el-link>
          <el-divider v-if="false" direction="vertical"></el-divider>
          <el-link v-if="false" type="primary" @click="toResetPassword">{{ domText.resetPassword }}</el-link>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import Logo from '@/components/Logo'
import Sidentify from '@/components/Sidentify'
import {getCode} from '@/api/login'
export default {
  name: 'LoginForm',
  data () {
    return {
      formData: {
        username: '',
        password: '',
        inputCode: undefined,
        uuid: ''
      },
      rules: {
        username: [
          this.$validate.necessary('请输入邮箱'),
          this.$validate.email()
        ],
        password: [
          this.$validate.necessary('请输入密码'),
          this.$validate.length(6, 16, '密码')
        ],
        inputCode: [
          this.$validate.necessary('验证码不能为空')
        ]
      },
      domText: {
        register: '注册账号',
        resetPassword: '忘记密码'
      },
      identify: {
        identifyCode: '',
        identifyCodeId: ''
      },
      loading: true
    }
  },
  created () {
    this.refreshCode()
  },
  mounted () {
    this.identify.identifyCode = ''
  },
  components: {
    Logo,
    Sidentify
  },
  methods: {
    handleLogin () {
      this.$refs['loginForm'].validate(valid => {
        // 表单验证
        if (valid) {
          // 第一次验证码确认
          if (this.identify.identifyCode.toLowerCase() === this.formData.inputCode.toLowerCase()) {
            this.$store
              .dispatch('Login', this.formData)
              .then(() => {
                this.$notify.success('登陆成功')
                this.$store.dispatch('SetCurrentMenu', '工作台')
                this.$router.push('/dashboard')
              })
              .catch(error => {
                this.$notify.error({
                  title: '登陆失败',
                  message: error.message
                })
                this.refreshCode()
              })
          } else {
            this.$notify.error('验证码输入错误')
            this.formData.inputCode = ''
            this.refreshCode()
          }
        }
      })
    },
    refreshCode () {
      // 刷新验证码
      this.identify.identifyCode = ''
      this.makeCode(4)
    },
    makeCode (len) {
      this.$data.loading = true
      getCode(len).then(res => {
        // test end
        setTimeout(() => {
          // 获取验证码和验证码ID
          this.identify.identifyCode = res.data.code
          this.identify.identifyCodeId = res.data.codeId
          this.formData.uuid = res.data.codeId
          this.loading = false
        }, 300)
      })
    },
    toRegister () {
      this.$router.push('/register')
    },
    toResetPassword () {
      /**
       * title即为标题
       * message为通知正文
       * duration为自动消失延时，0为不自动消失，单位为ms
       */
      this.$notify({
        title: '这是一个通知',
        message: '重置密码',
        duration: 2 * 1000
      })
      // this.$router.push('resetPassword')
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.login-code{
  /* 改变鼠标移动到验证码容器上时的样式 */
  cursor: pointer;
}
.logo {
  display: flex;
  justify-content: center;
}
.el-card {
  border: 1px solid #d9dce2;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.form-item-input {
  width: 100%;
}
</style>
